<template>
  <view class="container">
    <view style="margin-bottom: 30rpx;">
      <text style="font-size: 35rpx; font-weight: 600;">优惠券名称</text>
    </view>
    <view class="form-item">
      <text>优惠券类型</text>
      <radio-group v-model="couponType">
        <label>
			满减券 <radio style="margin: 0 25rpx;" value="满减券" /> 
        </label>
        <label>
			打折券 <radio style="margin: 0 25rpx;" value="打折券" /> 
        </label>
      </radio-group>
    </view>
    <view class="form-item" style="margin-left: 300rpx;">
      满
	  <input class="button" type="number" v-model="minAmount" />
	  元减
	  <input class="button" type="number" v-model="discountAmount" />
	  元
    </view>
    <view class="form-item">
      <text>发放开始时间</text>
      <picker mode="date" @change="onStartDateChange">
        <view class="picker">
          {{ startDate || '请选择日期' }}
        </view>
      </picker>
    </view>
    <view class="form-item">
      <text>发放结束时间</text>
      <picker mode="date" @change="onEndDateChange">
        <view class="picker">
          {{ endDate || '请选择日期' }}
        </view>
      </picker>
    </view>
    <view class="form-item">
      <text>投放数量</text>
      <input type="number" v-model="quantity" />
    </view>
    <view class="form-item">
      <text>每人限领</text>
      <input type="number" v-model="limitPerPerson" />
    </view>
    <view class="form-item">
      <text>使用有效期</text>
      <picker mode="date" @change="onValidityStartDateChange">
        <view class="picker">
          {{ validityStartDate || '开始时间' }}
        </view>
      </picker>
      <picker mode="date" @change="onValidityEndDateChange">
        <view class="picker">
          {{ validityEndDate || '结束时间' }}
        </view>
      </picker>
    </view>
    <button class="submit-btn" @click="submitCoupon">确认投放</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      couponName: '',
      couponType: '满减券',
      minAmount: '',
      discountAmount: '',
      startDate: '',
      endDate: '',
      quantity: '',
      limitPerPerson: '',
      validityStartDate: '',
      validityEndDate: ''
    };
  },
  methods: {
    onStartDateChange(e) {
      this.startDate = e.detail.value;
    },
    onEndDateChange(e) {
      this.endDate = e.detail.value;
    },
    onValidityStartDateChange(e) {
      this.validityStartDate = e.detail.value;
    },
    onValidityEndDateChange(e) {
      this.validityEndDate = e.detail.value;
    },
    submitCoupon() {
      // 提交优惠券的逻辑
      console.log('提交优惠券', {
        couponName: this.couponName,
        couponType: this.couponType,
        minAmount: this.minAmount,
        discountAmount: this.discountAmount,
        startDate: this.startDate,
        endDate: this.endDate,
        quantity: this.quantity,
        limitPerPerson: this.limitPerPerson,
        validityStartDate: this.validityStartDate,
        validityEndDate: this.validityEndDate
      });
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
.form-item {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid gainsboro;
  padding: 10rpx 0;
}
.form-item text{
	margin-right: 120rpx;
}
.button{
	width: 110rpx;
	border-bottom: 1px solid black;
}
.picker {
  border: 1px solid #ccc;
  padding: 10rpx;
  margin: 0 5rpx;
}
.submit-btn {
	margin-top: 75rpx;
  background-color: #fff;
  color: #007aff;
  /* padding: 10px; */
  text-align: center;
  border: 1px solid #007aff;
}
</style>